<template>
  <div class="addstaff">
    <p class="addstaff-title">增购账号</p>
    <p class="addstaff-tip">您当前展位剩余的商机点数为：54545 点<i class="el-icon-warning" /></p>
    <div class="flex-list">
      <span class="list-label">展位名称：</span>
      <span class="list-info">赛默飞世尔科技（中国）有限公司集团展位</span>
    </div>
    <div class="flex-list">
      <span class="list-label">已购权限：</span>
      <span class="list-info">员工账号数量10个 （剩余权限数 0个）</span>
    </div>
    <div class="flex-list">
      <span class="list-label">新增权限：</span>
      <span class="list-info mr16">员工账号数</span>
      <el-input-number size="small" :min="1" :max="10" label="描述文字" />
      <span class="list-info ml16">（50商机点/个）</span>
    </div>
    <el-button type="mb16" @click="cancelBtn">返回</el-button>
    <el-button type="primary mb16">确认购买</el-button>
    <p class="addstaff-tip">点击 确认购买 即视为同意<el-link type="primary">《xxxxxx协议》</el-link></p>
  </div>
</template>
<script>
import { validateMobile, validateEmail } from '@/utils/validate'
import api from '@/api/index'
export default {
  name: 'StaffInfo',
  components: {},
  data () {
    return {
      roleList: [],
      ruleForm: {
        mobile: '',
        email: '',
        nickName: '',
        roleId: '',
        imShowId: this.$store.getters.imShowId,
        imListId: this.$store.getters.imListId,
        pathurl: this.$store.getters.imShowId.substring(0, 2).toLowerCase() == 'tw' ? 'twBoss' : 'PtBoss',
        userName: this.$store.getters.username,
        userId: this.$store.getters.useid
      },
      rules: {
        mobile: [
          { required: true, validator: validateMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, validator: validateEmail, trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getQueryAccountRole()
  },
  methods: {
    cancelBtn () {
      const temState = {
        isStaffIndex: true,
        isAddStaff: false,
        isAddAccount: false,
        isEditStaff: false
      }
      this.$emit('templateChange', temState)
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data } = await api.boss.addAccountInfo(this.ruleForm)
        } else {
          return false
        }
      })
    },
    // 获取权限列表
    async getQueryAccountRole () {
      const searchParams = {
        imListId: this.imListId,
        pathurl: this.pathurl
      }
      const { data } = await api.boss.queryAccountRoleList(searchParams)
      this.roleList = data
    }
  }
}
</script>
<style lang="scss" scoped>
  .addstaff {
    width: 100%;
    height: 100%;
    padding: 16px 16px 16px 32px;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
    .addstaff-title {
      font-size: 16px;
      font-weight: bold;
      line-height: 1.5;
      color: #202933;
      padding-left: 8px;
      position: relative;
      &::before {
        content: "";
        width: 2px;
        height: 14px;
        background: #0C7FF2;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
      }
    }
    .addstaff-tip {
      font-size: 12px;
      color: #7E8790;
      line-height: 1.5;
      margin: 4px auto 20px;
      i {
        margin-left: 5px;
      }
      a {
        font-size: 12px;
      }
    }
    .flex-list {
      width: 100%;
      height: 55px;
      .list-label {
        display: inline-block;
        width: 100px;
        font-size: 14px;
        color: #202933;
      }
      .list-info {
        font-size: 14px;
        color: #202933;
      }
    }
  }
</style>
